<template>
	<view class="story">
		<view class="bgImg imgPublic">
			<image :src="datas.brandinfo.brand_image" mode="widthFix"></image>
			<div class='imgZz'></div>
		</view>
		<view class="container">
			<view class="banner">
				<!-- <u-swiper :list="banner" keyName="image" :autoplay="true" :height='swHeight' :indicator='true'></u-swiper> -->
				<image :src="datas.brandinfo.brand_image" mode="widthFix"></image>
			</view>
			<view class="part">
				<view class='partTit dFlex jBetween_aCenter' style='border-bottom:none;'>
					<text>{{datas.brandinfo.name}}</text>
				</view>
				<view class="partVal">
					<view class="store" v-html='datas.brandinfo.content'></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script> 
	import {
		getGoodsDetail,
	} from '@/tools/http.js';
	export default {
		data() {
			return {
				swHeight:'',
				banner:[],
				datas:{},
			};
		},
		onLoad(e){
			this.id = e.id;
			this.getShopInfo();
		},
		onShow(){},
		methods:{
			// 商品详情
			async getShopInfo(){
				let res = await getGoodsDetail({
					id:this.id,
				})
				console.log(res);
				if(res){
					res.loops = res.loops.split(',');
					this.banner = res.loops.map((item,index)=>{
						return {
							id:index,
							image:item
						}
					})
					this.getAdvImgHeight();
					this.datas = res;
				}
			},
			getAdvImgHeight(){
				uni.getImageInfo({
					src:this.banner[0].image,
					success: (info) => {
						let rate = info.width / info.height;
						this.swHeight = (uni.getSystemInfoSync().windowWidth * 0.948) / rate; 
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.story{
		width: 100%;
		position: relative;
		.container{
			width: 100%;
			padding: 30px 2.6% 0;
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			z-index:3;
			.part{
				width:100%;
				background:white;
				border-radius:5px;
				padding:12px;
				box-sizing:border-box;
				.partVal{
					width:100%;
					overflow:hidden;
					.store{
						color:#808080;
						font-size:12px;
						line-height:20px;
					}
				}
				.partTit{
					width:100%;
					padding:10px 0;
					border-bottom:1px solid #E6E6E6;
					font-size:13px;
					font-weight:bold;
				}
			}
		}
		.bgImg{
			width: 100%;
			height:20vh;
			overflow: hidden;
			border-bottom-left-radius: 4px;
			border-bottom-right-radius:4px;
			position:relative;
			.imgZz{
				width:100%;
				height:100%;
				z-index:1;
				position:absolute;
				top:0;
				left:0;
				background:rgba(0,0,0,0.5);
			}
		}
	}
</style>
